<template>
  <div class="cs-page-container">
    <div class="cs-filter-container">

    </div>
    <div style="margin:10px 0">
      <el-button
        type="warning"
        @click="onGoEdit({type: null, userIds: null})"
      >新增</el-button>
    </div>
    <div class="cs-filter-result">
      <el-table
        id="anchorListSecond"
        v-loading="listLoading"
        :data="list"
        :height="'calc(100vh - 250px)'"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column align="center" label="分类" prop="type">
        </el-table-column>
        <el-table-column align="center" label="用户ID" prop="userId" />
        <el-table-column align="center" label="操作" fixed="right" width="160">
          <template slot-scope="{ row }">
            <el-button
              type="primary"
              size="mini"
              @click="onGoEdit(row)"
            >编辑</el-button>
            <el-button
              type="danger"
              size="mini"
              @click="onDelete(row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.page"
        :limit="listQuery.limit"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
    <el-dialog
      v-loading="dialogLoading"
      title="编辑用户分类"
      :visible.sync="editDialog"
      width="50%"
    >
      <el-form
        ref="dataForm"
        :model="userDetail"
        label-position="left"
        label-width="100px"
        style="margin-left:50px;"
      >
        <el-form-item label="分类:" prop="title">
          <el-input v-model.trim="userDetail.type" maxlength="60" />
        </el-form-item>
        <el-form-item
          label="用户id"
        >
          <el-input v-model.trim="userDetail.userIds" maxlength="800" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialog= false">取 消</el-button>
        <el-button type="primary" @click="_onGoEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import TablePagination from '@/components/TablePagination'
  import { xhrAnalysisUserClassList, xhrAnalysisInsertUserClass, xhrAnalysisDeleteUserClass } from '@/api/account'
  import DATEPICKER_OPTIONS from '@/config/datepickerOptions'

  export default {
    name: 'AnchorClass',
    components: { TablePagination },
    data() {
      return {
        list: null,
        total: 0,
        daterangeValue: '',
        daterangePickerOptions: DATEPICKER_OPTIONS.daterangePickerOptions,
        listQuery: {
          page: 1,
          limit: 100,
          startTime: null,
          endTime: null
        },
        editDialog: false,
        userDetail: {
        },
        listLoading: true,
        dialogLoading: true
      }
    },
    created() {
      this.doSearch()
    },
    methods: {
      doSearch() {
        xhrAnalysisUserClassList()
          .then(resp => {
            this.list = resp.data.list
            this.total = resp.data.total
            this.listLoading = false
          })
          .catch(err => {
            this.$message.error(err)
            this.listLoading = false
          })
      },
      onGoEdit(row) {
        this.userDetail = row
        this.userDetail.userIds = row.userId
        this.editDialog = true
      },
      _onGoEdit() {
        xhrAnalysisInsertUserClass(this.userDetail).then(resp => {
          this.userDetail = {}
          this.editDialog = false
          this.doSearch()
        }).catch(err => {
          this.$message.error(err)
          this.editDialog = false
        })
      },
      onDelete(row) {
        this.$confirm('是否删除此内容?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          xhrAnalysisDeleteUserClass(row).then(resp => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.doSearch()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  }
</script>
<style scoped>

</style>
